<template>
	<div>
		<div class="main">
			<div class="main_left">
				<div class="main_left_one" style="width: 50px;height: 486px;display: flex;justify-content: center;" v-show="show_one">
					<img src="../../assets/images/up_right.png" alt="" style="width: 30px;height: 30px;margin-top: 15px;" @click="btn(10)">
				</div>
				<div class="main_left_one" v-show="isleft_one">
					<div class="title">
						<div style="margin-left: 10px;display: flex;align-items: center;">
							<img src="../../assets/images/icon_xiao.png" alt="" style="width: 20px;height: 20px;">
							<span style="margin-left: 4px;">柴油车综合数据</span>
						</div>
						<div @click="btn(1)">
							<img src="../../assets/images/up_left.png" alt="" style="width: 15px;height: 15px;">
						</div>
					</div>
					<div style="min-width:364px;color:#FEFFFF;font-size:12px;float: left;margin-left: 15px;margin-bottom: 15px;">超标车辆名单:</div>
					<div style="width:97%;margin-left: 5px; color:rgba(255,255,255,1);display: flex; float:left;line-height:30px;background: #0A4563;">
						<div style="width:22%;font-size: 12px;padding-left: 10px;">车辆号码</div>
						<div style="width:20%;font-size: 12px;">排放阶段</div>
						<div style="width:40%;font-size: 12px;">所属企业</div>
						<div style="width:15%;font-size: 12px;">所属区域</div>
					</div>
					<div style="display: flex; width: 100%;height: 170px;overflow: hidden;line-height: 30px; transition: all 0.5s;color: rgba(255, 255, 255, 0.7);">
						<div id="con1" ref="con1" :class="{ anim: animate == true }" @mouseenter="mEnter" @mouseleave="mLeave">
							<div v-for="(item,index) in item1" style="display: flex;" :class="[index == 1?'class1':'class2']">
								<div style="width:22%;font-size: 10px;color: #00BBEF;text-align: center;">{{ item.id }}</div>
								<div style="width:15%;font-size: 10px;color: #00BBEF;text-align: center;">{{ item.star }}</div>
								<div style="width:43%;font-size: 10px;color: #00BBEF;padding-left: 17px;">{{ item.name }}</div>
								<div style="width:15%;font-size: 10px;color: #00BBEF;text-align: center;">{{ item.region }}</div>
							</div>
						</div>
					</div>
					<div style="display: flex;margin-top: 10px;margin-bottom: 8px;">
						<div style="color:rgba(255,255,255,1);font-size:12px;width: 50%;padding-top: 10px;padding-left: 20px;">超标车辆月度变化：</div>
						<div style="color:rgba(255,255,255,1);font-size:12px;width: 50%;text-align: center;padding-top: 10px;">排放阶段分布：</div>
					</div>
					<div style="display: flex;align-items: center;justify-content: center;margin-bottom: 8px;">
						<div style="width:96%;height: 150px; margin-left:2%;">
							<div id="chart6" style="width:220px;height:100%;"></div>
						</div>
						<div style="width:96%;height:150px;margin-left:2%;display: flex;align-items: center;justify-content: center; ">
							<div class="main_left_title cursor">
								<div>
									<div style="color:#EA4D3D ;display: flex;align-items: center;justify-content: center;">
										<p style="width: 14px;height: 8px;background: #EA4D3D;border-radius: 1px;margin: 0;margin-right: 10px;"></p>
										<span style="width: 25px; font-size: 12px;">国III</span>
									</div>
									<div style="color:#00E6FF ;display: flex;align-items: center;justify-content: center;">
										<p style="width: 14px;height: 8px;background: #00E6FF;border-radius: 1px;margin: 0;margin-right: 10px;"></p>
										<span style="width: 25px; font-size: 12px;">国IV</span>
									</div>
									<div style="color:#FEE201 ;display: flex;align-items: center;justify-content: center;">
										<p style="width: 14px;height: 8px;background: #FEE201;border-radius: 1px;margin: 0;margin-right: 10px;"></p>
										<span style="width: 25px; font-size: 12px;">国V</span>
									</div>
								</div>
								<div id="chart" style="width:75px;height:75px;margin-left:4px"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="main_left_two">
					<div class="title">
						<div style="margin-left: 10px;display: flex;align-items: center;">
							<img src="../../assets/images/icon_xiao.png" alt="" style="width: 20px;height: 20px;">
							<span style="margin-left: 4px;">加油站综合数据</span>
						</div>
						<div>
							<img src="../../assets/images/up_left.png" alt="" style="width: 15px;height: 15px;">
						</div>
					</div>
					<div style="min-width:364px;color:rgba(255,255,255,1);font-size:12px;float: left;margin-left: 15px;margin-bottom: 15px;">违规加油站名单:</div>
					<div style="width:100%;color:rgba(255,255,255,1);float:left;line-height:30px;background: #0A4563;">
						<div style="float:left;width:25%;text-align: center;font-size: 12px;">名称</div>
						<div style="float:left;width:50%;font-size: 12px;">所属企业</div>
						<div style="float:left;width:25%;text-align: center;font-size: 12px;">所属区域</div>
					</div>
					<div style="width: 100%;height: 150px;overflow: hidden;line-height: 30px; transition: all 0.5s;color: rgba(255, 255, 255, 0.7);">
						<div id="con1" ref="con1" :class="{ anim: animate == true }" @mouseenter="mEnter" @mouseleave="mLeave">
							<div v-for="item in item2">
								<div style="width:25%;float:left;text-align: center;font-size: 10px;color: #00BBEF;">{{ item.id }}</div>
								<div style="width:50%;float:left;font-size: 10px;color: #00BBEF;">{{ item.name }}</div>
								<div style="width:25%;float:left;text-align: center;font-size: 10px;color: #00BBEF;">{{ item.region }}</div>
							</div>
						</div>
					</div>
					<div style="width:100%;min-width:364px;color:rgba(255,255,255,1);font-size:12px;float: left;margin-left: 15px;margin-top: 10px;">违规加油站月度变化:</div>
					<div style="width:96%;height:150px;margin-left:2%;margin-top: 30px;margin-bottom: 14px; ">
						<div id="chart1" style="width:100%;height:100%;"></div>
					</div>
				</div>
			</div>
			<div class="main_center">
				<div class="main_center_top">
					<div style="width:80%;margin-left:10%;margin-top: 20px;">
						<div style="width:20%;float:left;text-align: center;">
							<div style="font-size:12px;color:rgba(255, 255, 255, .8);">监测车辆数</div>
							<div style="font-family:'DS-DIGIB';font-size:20px;color:rgba(0, 230, 255, 1);letter-spacing:8px;">29800</div>
						</div>
						<div style="width:20%;float:left;text-align: center;">
							<div style="font-size:12px;color:rgba(255, 255, 255, .8);">监测机械数</div>
							<div style="font-family:'DS-DIGIB';font-size:20px;color:rgba(0, 230, 255, 1);letter-spacing:8px;">9800</div>
						</div>
						<div style="width:20%;float:left;text-align: center;">
							<div style="font-size:12px;color:rgba(255, 255, 255, .8);">监测加油站数</div>
							<div style="font-family:'DS-DIGIB';font-size:20px;color:rgba(0, 230, 255, 1);letter-spacing:8px;">3000</div>
						</div>
						<div style="width:20%;float:left;text-align: center;">
							<div style="font-size:12px;color:rgba(255, 255, 255, .8);">监测企业门禁数</div>
							<div style="font-family:'DS-DIGIB';font-size:20px;color:rgba(0, 230, 255, 1);letter-spacing:8px;">3000</div>
						</div>
						<div style="width:20%;float:left;text-align: center;">
							<div style="font-size:12px;color:rgba(255, 255, 255, .8);">监测遥感数</div>
							<div style="font-family:'DS-DIGIB';font-size:20px;color:rgba(0, 230, 255, 1);letter-spacing:8px;">3000</div>
						</div>
						<a-tooltip placement="bottom">
							<div style="width:20%;float:left;text-align: center;margin-top: 15px;" class="cursor">
								<div style="font-size:12px;color:rgba(255, 255, 255, .8);">报警车辆数</div>
								<div style="font-family:'DS-DIGIB';font-size:20px;color:rgba(255, 41, 41, 1);letter-spacing:8px;">800</div>
							</div>
						</a-tooltip>
						<a-tooltip placement="bottom">
							<div style="width:20%;float:left;text-align: center;margin-top: 15px;" class="cursor">
								<div style="font-size:12px;color:rgba(255, 255, 255, .8);">报警机械数</div>
								<div style="font-family:'DS-DIGIB';font-size:20px;color:rgba(255, 41, 41, 1);letter-spacing:8px;">9800</div>
							</div>
						</a-tooltip>
						<a-tooltip placement="bottom">
							<div style="width:20%;float:left;text-align: center;margin-top: 15px;" class="cursor">
								<div style="font-size:12px;color:rgba(255, 255, 255, .8);">报警加油站数</div>
								<div style="font-family:'DS-DIGIB';font-size:20px;color:rgba(255, 41, 41, 1);letter-spacing:8px;">3000</div>
							</div>
						</a-tooltip>
						<a-tooltip placement="bottom">
							<div style="width:20%;float:left;text-align: center;margin-top: 15px;" class="cursor">
								<div style="font-size:12px;color:rgba(255, 255, 255, .8);">报警企业门禁数</div>
								<div style="font-family:'DS-DIGIB';font-size:20px;color:rgba(255, 41, 41, 1);letter-spacing:8px;">3000</div>
							</div>
						</a-tooltip>
						<a-tooltip placement="bottom">
							<div style="width:20%;float:left;text-align: center;margin-top: 15px;" class="cursor">
								<div style="font-size:12px;color:rgba(255, 255, 255, .8);">报警遥感数</div>
								<div style="font-family:'DS-DIGIB';font-size:20px;color:rgba(255, 41, 41, 1);letter-spacing:8px;">3000</div>
							</div>
						</a-tooltip>
					</div>
				</div>
				<div class="amap-wrapper" style="width:100%;height:512px;">
					<el-amap vid="amapDemo" :center="center" :zoom="zoom" class="amap-demo" :events="events" >
					  <el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker.position" :content="marker.content" :events="marker.events" :icon="Icon"></el-amap-marker>
					</el-amap>
					<!-- <el-amap vid="amap-vue" :events="mapEvents" :center="center"  class="amap-demo">
						<el-amap-marker v-for="marker in markers" :position="marker.position" :events="marker.events" :icon="Icon"></el-amap-marker>
					</el-amap> -->
				</div>
				<!-- <div style="width:100%;height:512px;background:red;" id="allmap" ref="allmap"></div> -->
				<div class="main_center_bottom">
					<div class="title">
						<div style="margin-left: 10px;display: flex;align-items: center;">
							<img src="../../assets/images/icon_xiao.png" alt="" style="width: 20px;height: 20px;">
							<span style="margin-left: 4px;">遥感综合数据</span>
						</div>
						<div>
							<img src="../../assets/images/up_down.png" alt="" style="width: 15px;height: 15px;">
						</div>
					</div>
					<div style="display: flex;align-items: center;justify-content: space-between;">
						<div>
							<div style="width:90%;color:rgba(255,255,255,1);float:left;line-height:30px;background: #0A4563;">
								<div style="float:left;width:25%;text-align: center;font-size:12px;">遥感设备号</div>
								<div style="float:left;width:20%;text-align: center;font-size:12px;">超标车辆数</div>
								<div style="float:left;width:55%;font-size:12px;padding-left: 10px;">位置</div>
							</div>
							<div style="width:90%;height: 150px;margin-left: 10px; overflow: hidden;line-height: 30px; transition: all 0.5s;color: rgba(255, 255, 255, 0.7);">
								<div id="con1" ref="con1" :class="{ anim: animate == true }" @mouseenter="mEnter" @mouseleave="mLeave">
									<div v-for="item in item4">
										<div style="width:25%;float:left;text-align: center;font-size:10px;color: #00BBEF;">{{ item.id }}</div>
										<div style="width:15%;float:left;text-align: center;font-size:10px;color: #00BBEF;">{{ item.name }}</div>
										<div style="width:60%;float:left;font-size:10px;color: #00BBEF;padding-left: 20px;">{{ item.region }}</div>
									</div>
								</div>
							</div>
						</div>
						<div>
							<div style="width:100%;color:rgba(255,255,255,1);font-size:13px;">超标车辆的区域分布:</div>
							<div class="main_left_title cursor" style="margin-top: 50px;margin-bottom: 25px;">
								<div>
									<div style="color:#00E6FF ;display: flex;align-items: center;justify-content: center;">
										<p style="width: 16px;height: 8px;background: #00E6FF;border-radius: 1px;margin: 0;margin-right: 10px;"></p>
										<span style="font-size:12px;width: 40px;">区域内</span>
									</div>
									<div style="color:#FEE201 ;display: flex;align-items: center;justify-content: center;">
										<p style="width: 16px;height: 8px;background: #FEE201;border-radius: 1px;margin: 0;margin-right: 10px;"></p>
										<span style="font-size:12px;width: 40px;">区域外</span>
									</div>
								</div>
								<div id="chart5" style="width:75px;height:75px;"></div>
							</div>
						</div>
						<div>
							<div style="width:100%;color:rgba(255,255,255,1);font-size:12px;width: 145px;">超标车辆的排放阶段分布:</div>
							<div class="main_left_title cursor" style="margin-top: 50px;margin-bottom: 25px;">
								<div>
									<div style="color:#EA4D3D ;display: flex;align-items: center;justify-content: center;">
										<p style="width: 16px;height: 8px;background: #EA4D3D;border-radius: 1px;margin: 0;margin-right: 10px;"></p>
										<span style="font-size:12px;width: 30px;">国III</span>
									</div>
									<div style="color:#00E6FF ;display: flex;align-items: center;justify-content: center;">
										<p style="width: 16px;height: 8px;background: #00E6FF;border-radius: 1px;margin: 0;margin-right: 10px;"></p>
										<span style="font-size:12px;width: 30px;">国IV</span>
									</div>
									<div style="color:#FEE201 ;display: flex;align-items: center;justify-content: center;">
										<p style="width: 16px;height: 8px;background: #FEE201;border-radius: 1px;margin: 0;margin-right: 10px;"></p>
										<span style="font-size:12px;width: 30px;">国V</span>
									</div>
									<div style="color:#2CB900 ;display: flex;align-items: center;justify-content: center;">
										<p style="width: 16px;height: 8px;background: #2CB900;border-radius: 1px;margin: 0;margin-right: 10px;"></p>
										<span style="font-size:12px;width: 30px;">国VI</span>
									</div>
								</div>
								<div id="chart7" style="width:75px;height:75px;"></div>
							</div>
						</div>
					</div>
					<div style="display: flex;margin-top: 8px;justify-content: space-between;background: #273854;padding: 6px 0;">
						<div style="display: flex;">
							<div style="color: #FFFFFF;font-size: 14px;padding-left: 15px;">选择地图展示元素：</div>
							<el-checkbox-group v-model="checkList">
							    <el-checkbox label="车辆" style="font-size:12px;color: #FFFFFF;"></el-checkbox>
							    <el-checkbox label="机械" style="font-size:12px;color: #FFFFFF;"></el-checkbox>
							    <el-checkbox label="遥感" style="font-size:12px;color: #FFFFFF;"></el-checkbox>
								<el-checkbox label="门禁" style="font-size:12px;color: #FFFFFF;"></el-checkbox>
								<el-checkbox label="加油站" style="font-size:12px;color: #FFFFFF;"></el-checkbox>
							</el-checkbox-group>
						</div>
						<div style="display:flex;align-items: center;">
							<div  style="display:flex;align-items: center;margin-right: 10px;">
								<div style="background:#19952A;width:15px;height:8px;"></div>
								<div style="color:#fff;font-size:12px;margin-left:4px;">正常</div>
							</div>
							<div style="display:flex;align-items: center;margin-right: 10px;">
								<div style="background:#DD0000;width:15px;height:8px;"></div>
								<div style="color:#FFF;font-size:12px;margin-left:4px;">报警</div>
							</div>
							<div style="display:flex;align-items: center;margin-right: 10px;">
								<div style="background:#6A6A6A;width:12px;height:8px;"></div>
								<div style="color:#FFF;font-size:12px;margin-left:4px;">离线</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="main_right">
				<div class="main_right_one">
					<div class="title">
						<div style="margin-left: 10px;display: flex;align-items: center;">
							<img src="../../assets/images/icon_xiao.png" alt="" style="width: 20px;height: 20px;">
							<span style="margin-left: 4px;">工程机械车综合数据</span>
						</div>
						<div>
							<img src="../../assets/images/up_right.png" alt="" style="width: 15px;height: 15px;">
						</div>
					</div>
					<div style="color:rgba(255,255,255,1);font-size:12px;float: left;margin-left: 15px;margin-bottom: 15px;">超标机械月度变化:</div>
					<div id="chart2" style="width:100%;height:150px;margin-top: 45px;"></div>
					<div style="display: flex;margin-top: 24px;margin-bottom: 12px;">
						<div style="color:rgba(255,255,255,1);font-size:12px;width: 50%;margin-left: 24px;">机械类型分布：</div>
						<div style="color:rgba(255,255,255,1);font-size:12px;">排放阶段分布：</div>
					</div>
					<div style="display: flex;align-items: center;justify-content: center;padding-bottom: 20px;">
						<div style="width:100%;margin-left:20px;display: flex;align-items: center;justify-content: center;">
							<div style="line-height: 24px;">
								<div style="color:#F19900 ;font-size: 12px;width: 50px;">● 挖掘机</div>
								<div style="color:#2CB900 ;font-size: 12px;width: 50px;">● 推土机</div>
								<div style="color:#049F5F ;font-size: 12px;width: 50px;">● 堆高机</div>
								<div style="color:#00E6FF ;font-size: 12px;width: 50px;">● 装卸机</div>
							</div>
							<div id="chart3" style="width:85px;height:85px;"></div>
							<div style="margin-left: 10px;line-height: 24px;">
								<div style="color:#EA4D3D ;font-size: 12px;width: 50px;">● 压路机</div>
								<div style="color:#FEE201 ;font-size: 12px;width: 50px;">● 摊铺机</div>
								<div style="color:#9000C6 ;font-size: 12px;width: 50px;">● 叉车</div>
								<div style="color:#0C00FF ;font-size: 12px;width: 50px;">● 起重机</div>
							</div>
						</div>
						<div style="width:100%;display: flex;align-items: center;justify-content: center; ">
							<div class="main_left_title cursor">
								<div>
									<div style="color:#EA4D3D ;display: flex;align-items: center;justify-content: center;">
										<p style="width: 16px;height: 8px;background: #EA4D3D;border-radius: 1px;margin: 0;"></p>
										<span style="font-size: 12px;margin-left: 4px;">国III</span>
									</div>
									<div style="color:#00E6FF ;display: flex;align-items: center;justify-content: center;">
										<p style="width: 16px;height: 8px;background: #00E6FF;border-radius: 1px;margin: 0;"></p>
										<span style="font-size: 12px;margin-left: 4px;">国IV</span>
									</div>
									<div style="color:#FEE201 ;display: flex;align-items: center;justify-content: center;">
										<p style="width: 16px;height: 8px;background: #FEE201;border-radius: 1px;margin: 0;"></p>
										<span style="font-size: 12px;margin-left: 4px;">国V</span>
									</div>
								</div>
								<div id="chart4" style="width:85px;height:85px;"></div>
							</div>
						</div>
					</div>
					<div style="color:rgba(255,255,255,1);font-size:12px;float: left;margin-left: 15px;margin-bottom: 16px;">超标机械名单:</div>
					<div style="width:100%;color:rgba(255,255,255,1);float:left;line-height:40px;background: #0A4563;">
						<div style="float:left;width:25%;text-align: center;font-size: 12px;">车辆号码</div>
						<div style="float:left;width:15%;text-align: center;font-size: 12px;">排放阶段</div>
						<div style="float:left;width:40%;text-align: center;font-size: 12px;">所属企业</div>
						<div style="float:left;width:15%;text-align: center;font-size: 12px;">所属区域</div>
					</div>
					<div style="width: 100%;height: 140px;overflow: hidden;margin-bottom: 14px; line-height: 30px; transition: all 0.5s;color: rgba(255, 255, 255, 0.7);">
						<div id="con1" ref="con1" :class="{ anim: animate == true }" @mouseenter="mEnter" @mouseleave="mLeave">
							<div v-for="item in item1">
								<div style="width:25%;float:left;text-align: center;font-size: 10px;color: #00BBEF;">{{ item.id }}</div>
								<div style="width:15%;float:left;text-align: center;font-size: 10px;color: #00BBEF;">{{ item.star }}</div>
								<div style="width:42%;float:left;text-align: center;font-size: 10px;color: #00BBEF;">{{ item.name }}</div>
								<div style="width:15%;float:left;text-align: center;font-size: 10px;color: #00BBEF;">{{ item.region }}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="main_right_two">
					<div class="title">
						<div style="margin-left: 10px;display: flex;align-items: center;">
							<img src="../../assets/images/icon_xiao.png" alt="" style="width: 20px;height: 20px;">
							<span style="margin-left: 4px;">企业门禁综合数据</span>
						</div>
						<div>
							<img src="../../assets/images/up_right.png" alt="" style="width: 15px;height: 15px;">
						</div>
					</div>
					<div style="color:rgba(255,255,255,1);font-size:12px;float: left;margin-left: 15px;margin-bottom: 15px;">违规企业名单:</div>
					<div style="width:96%;color:rgba(255,255,255,1);float:left;line-height:30px;background: #0A4563;margin-left: 6px;">
						<div style="float:left;width:20%;text-align: center;font-size: 12px;">序号</div>
						<div style="float:left;width:55%;font-size: 12px;">所属企业</div>
						<div style="float:left;width:25%;text-align: center;font-size: 12px;">所属区域</div>
					</div>
					<div id="box">
						<div id="con1" ref="con1" :class="{ anim: animate == true }" @mouseenter="mEnter" @mouseleave="mLeave">
							<div v-for="item in items">
								<div style="width:20%;float:left;text-align: center;font-size: 10px;color: #00BBEF;">{{ item.id }}</div>
								<div style="width:55%;float:left;font-size: 10px;color: #00BBEF;">{{ item.name }}</div>
								<div style="width:25%;float:left;text-align: center;font-size: 10px;color: #00BBEF;">{{ item.region }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
  import VueAMap from 'vue-amap'
  let amapManager = new VueAMap.AMapManager();
import echarts from 'echarts';
export default {
	name: 'main',
	data() {
		let self = this;
		return {
			isleft_one:true,
			show_one:false,
			nowTime: '',
			nowDay: '',
			nowData: '',
			animate: false,
			animate1: false,
			timer1: '',
			item1:[
				{ id: '冀A123456',star:'国III', name: '石家庄格林塞尔科技有限公司', region: '裕华区' },
				{ id: '冀A123456',star:'国IV', name: '石家庄格林塞尔科技有限公司', region: '平山县' },
				{ id: '冀A123456',star:'国V', name: '石家庄格林塞尔科技有限公司', region: '井陉矿区' },
				{ id: '冀A123456',star:'国V', name: '石家庄格林塞尔科技有限公司', region: '井陉矿区' },
				{ id: '冀A123456',star:'国V', name: '石家庄格林塞尔科技有限公司', region: '井陉矿区' },
				{ id: '冀A123456',star:'国V', name: '石家庄格林塞尔科技有限公司', region: '井陉矿区' },
				{ id: '冀A123456',star:'国V', name: '石家庄格林塞尔科技有限公司', region: '井陉矿区' },
			],
			item2:[
				{ id: '中石化', name: '石家庄格林塞尔科技有限公司', region: '裕华区' },
				{ id: '中海化', name: '石家庄格林塞尔科技有限公司', region: '平山县' },
				{ id: '中石油',name: '石家庄格林塞尔科技有限公司', region: '井陉矿区' },
				{ id: '中海化',name: '石家庄格林塞尔科技有限公司', region: '井陉矿区' },
				{ id: '中石油', name: '石家庄格林塞尔科技有限公司', region: '井陉矿区' },
				{ id: '中石化', name: '石家庄格林塞尔科技有限公司', region: '井陉矿区' },
				{ id: '中海化', name: '石家庄格林塞尔科技有限公司', region: '井陉矿区' },
			],
			item4:[
				{ id: 'Y-FG562369832', name: '0', region: '武乡县新石北路城角街交叉口' },
				{ id: 'Y-FG562369832', name: '17', region: '武乡县红旗大街与新石中路交叉口兴隆台' },
				{ id: 'Y-FG562369832',name: '27', region: '井陉矿区' },
				{ id: 'Y-FG562369832',name: '3', region: '井陉矿区' },
				{ id: 'Y-FG562369832', name: '56', region: '井陉矿区' },
			],
			items: [
				//消息列表对应的数组
				{ id: '1', name: '石家庄格林塞尔科技有限公司', region: '裕华区' },
				{ id: '2', name: '石家庄格林塞尔科技有限公司', region: '平山县' },
				{ id: '3', name: '石家庄格林塞尔科技有限公司', region: '井陉矿区' },
				{ id: '4', name: '石家庄格林塞尔科技有限公司', region: '行唐县' },
				{ id: '5', name: '石家庄格林塞尔科技有限公司', region: '邯郸市' },
				{ id: '10000', name: '石家庄格林塞尔科技有限公司', region: '北京市' }
			],
			checkList: ['选中','车辆'],
			zoom: 10,
			center: [112.934393, 36.325076],
			markers: [],
			markerRefs: [],
			events: {
			  init(o) {
			    setTimeout(() => {
			      console.log(self.markerRefs);
			      let cluster = new AMap.MarkerClusterer(o, self.markerRefs,{
			        gridSize: 80,
			        renderCluserMarker: self._renderCluserMarker
			      });
			    }, 1000);
				o.setMapStyle('amap://styles/596bc87b02f1945c85d4036bf3af9245');
			  }
			},
			Icon:'http://47.92.217.241:7500/bbupload/bbsuperse/map/hongse.gif'
		};
	},
	created() {
		document.body.style.backgroundColor = '#061923';
		
		let self = this;
		let markers = [];
		let index = 0;
			  
		let basePosition = [112.934393, 36.325076];
			  
		while (++index <= 30) {
		  markers.push({
		    position: [basePosition[0] + 0.01 * index, basePosition[1]],
		    content: '<div style="text-align:center; background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
		    events: {
		      init(o) {
		        self.markerRefs.push(o);
		      }
		    }
		  });
		}
			  
		this.markers = markers;
	},
	mounted() {
		this.echarts();
		// this.ditu();
		this.nowTimes();
		this.timer1 = setInterval(this.scroll, 1000);
	},
	beforeDestroy() {
		clearInterval(this.timer1);
		this.timer1 = null;
	},
	methods: {
		// 点击事件
		btn(type){
			if (type == '1') {
				this.isleft_one = false
				this.show_one = true
			} else if(type == '10'){
				this.isleft_one = true
				this.show_one = false
			}
		},
		scroll() {
			let con1 = this.$refs.con1;
			con1.style.marginTop = '-30px';
			this.animate = !this.animate;
			var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
			setTimeout(function() {
				that.items.push(that.items[0]);
				that.items.shift();
				con1.style.marginTop = '0px';
				that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
			}, 500);
		},
		mEnter() {
			clearInterval(this.timer1);
		},
		mLeave() {
			this.timer1 = setInterval(this.scroll, 1000);
		},
		timeFormate(timeStamp) {
			let year = new Date(timeStamp).getFullYear();
			let month = new Date(timeStamp).getMonth() + 1 < 10 ? '0' + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1;
			let date = new Date(timeStamp).getDate() < 10 ? '0' + new Date(timeStamp).getDate() : new Date(timeStamp).getDate();
			let hh = new Date(timeStamp).getHours() < 10 ? '0' + new Date(timeStamp).getHours() : new Date(timeStamp).getHours();
			let mm = new Date(timeStamp).getMinutes() < 10 ? '0' + new Date(timeStamp).getMinutes() : new Date(timeStamp).getMinutes();
			let ss = new Date(timeStamp).getSeconds() < 10 ? '0' + new Date(timeStamp).getSeconds() : new Date(timeStamp).getSeconds();
			this.nowTime = year + '.' + month + '.' + date;
			this.nowDay = '星期' + '日一二三四五六'.charAt(new Date().getDay());
			this.nowData = hh + ':' + mm + ':' + ss;
		},
		nowTimes() {
			this.timeFormate(new Date());
			setInterval(this.nowTimes, 1000);
			this.clear();
		},
		clear() {
			clearInterval(this.nowTimes);
			this.nowTimes = null;
		},
		echarts() {
			var e = 80;
			var Chart = echarts.init(document.getElementById('chart'));
			let option = {
				title: {
					show: true,
					// text: e + '人',
					x: 'center',
					y: 'center',
					textStyle: {
						fontSize: '15',
						color: 'white',
						fontWeight: 'normal'
					}
				},
				tooltip: {
					trigger: 'item',
					formatter: '{d}%',
					show: false
				},
				legend: {
					orient: 'vertical',
					 x: 'left',
					show: false,
				},
				series: [{
						name: '',
						type: 'pie',
						radius: ['65%', '85%'],
						avoidLabelOverlap: true,
						hoverAnimation: false,
						label: {
							normal: {
								show: false,
								position: 'center'
							},
							emphasis: {
								show: false
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						itemStyle: {
							normal: {
								color: function(params) {
									var colorList = [
										{
											c1: '#EA4D3D', //国III
											c2: '#EA4D3D'
										},
										{
											c1: '#00E6FF', //国IV
											c2: '#00E6FF'
										},
										{
											c1: '#FEE201', //国V
											c2: '#FEE201'
										}
									];
									return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
										{
											//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
											offset: 0,
											color: colorList[params.dataIndex].c1
										},
										{
											offset: 1,
											color: colorList[params.dataIndex].c2
										}
									]);
								}
							}
						},
						data: [{ value: 60, name: '国III' }, { value: 200, name: '国IV' },{ value: 100, name: '国V' }]
					}
				]
			};
			Chart.setOption(option);

			var Chart6 = echarts.init(document.getElementById('chart6'));
			// 绘制图表
			var dataAxis = ['04-01', '04-05', '04-10', '04-15', '04-20','04-25', '04-30'];
			var data = [22, 20,23,25,32, 41, 14, 50, 70];
			var yMax = 100;
			var dataShadow = [];

			for (var i = 0; i < data.length; i++) {
				dataShadow.push(yMax);
			}

			Chart6.setOption({
				xAxis: {
					data: dataAxis,
					axisLabel: {
						textStyle: {
							color: '#999'
						}
					},
					splitLine: {
						show: false
					}
				},
				yAxis: {
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: ['#fff'],
							width: 1,
							type: 'solid',
							opacity: 0.13
						}
					},
					axisLabel: {
						textStyle: {
							color: '#999'
						}
					}
				},
				dataZoom: [
					{
						type: 'inside'
					}
				],
				grid: {
					left: '2%',
					right: '2%',
					bottom: '3%',
					top: '10%',
					containLabel: true
				},
				series: [
					{
						// For shadow
						type: 'bar',
						itemStyle: {
							color: 'rgba(0,0,0,0.01)'
						},
						barGap: '-100%',
						barCategoryGap: '80%',
						data: dataShadow,
						animation: false
					},

					{
						type: 'bar',
						itemStyle: {
							normal: {
								//柱形图圆角，初始化效果
								barBorderRadius: [6, 6, 6, 6],
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#00E6FF' }, { offset: 1, color: '#12C8D4' }]),
								label: {
									show: true,
									position: 'top',
									textStyle: {
										color: '#fff'
									}
								}
							}
						},
						emphasis: {},
						data: data
					}
				]
			});
			var Chart1 = echarts.init(document.getElementById('chart1'));
			// 绘制图表
			var dataAxis = ['04-01', '04-05', '04-10', '04-15', '04-20','04-25', '04-30'];
			var data = [22, 20,23,25,32, 41, 14, 50, 70];
			var yMax = 100;
			var dataShadow = [];
			
			for (var i = 0; i < data.length; i++) {
				dataShadow.push(yMax);
			}
			
			Chart1.setOption({
				xAxis: {
					data: dataAxis,
					axisLabel: {
						textStyle: {
							color: '#999'
						}
					},
					splitLine: {
						show: false
					}
				},
				yAxis: {
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: ['#fff'],
							width: 1,
							type: 'solid',
							opacity: 0.13
						}
					},
					axisLabel: {
						textStyle: {
							color: '#999'
						}
					}
				},
				dataZoom: [
					{
						type: 'inside'
					}
				],
				grid: {
					left: '2%',
					right: '2%',
					bottom: '3%',
					top: '10%',
					containLabel: true
				},
				series: [
					{
						// For shadow
						type: 'bar',
						itemStyle: {
							color: 'rgba(0,0,0,0.01)'
						},
						barGap: '-100%',
						barCategoryGap: '80%',
						data: dataShadow,
						animation: false
					},
			
					{
						type: 'bar',
						itemStyle: {
							normal: {
								//柱形图圆角，初始化效果
								barBorderRadius: [6, 6, 6, 6],
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#00E6FF' }, { offset: 1, color: '#12C8D4' }]),
								label: {
									show: true,
									position: 'top',
									textStyle: {
										color: '#fff'
									}
								}
							}
						},
						emphasis: {},
						data: data
					}
				]
			});
			var Chart2 = echarts.init(document.getElementById('chart2'));
			// 绘制图表
			var dataAxis = ['04-01', '04-05', '04-10', '04-15', '04-20','04-25', '04-30'];
			var data = [22, 20,23,25,32, 41, 14, 50, 70];
			var yMax = 100;
			var dataShadow = [];
			
			for (var i = 0; i < data.length; i++) {
				dataShadow.push(yMax);
			}
			
			Chart2.setOption({
				xAxis: {
					data: dataAxis,
					axisLabel: {
						textStyle: {
							color: '#999'
						}
					},
					splitLine: {
						show: false
					}
				},
				yAxis: {
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: ['#fff'],
							width: 1,
							type: 'solid',
							opacity: 0.13
						}
					},
					axisLabel: {
						textStyle: {
							color: '#999'
						}
					}
				},
				dataZoom: [
					{
						type: 'inside'
					}
				],
				grid: {
					left: '2%',
					right: '2%',
					bottom: '3%',
					top: '10%',
					containLabel: true
				},
				series: [
					{
						// For shadow
						type: 'bar',
						itemStyle: {
							color: 'rgba(0,0,0,0.01)'
						},
						barGap: '-100%',
						barCategoryGap: '80%',
						data: dataShadow,
						animation: false
					},
			
					{
						type: 'bar',
						itemStyle: {
							normal: {
								//柱形图圆角，初始化效果
								barBorderRadius: [6, 6, 6, 6],
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#00E6FF' }, { offset: 1, color: '#12C8D4' }]),
								label: {
									show: true,
									position: 'top',
									textStyle: {
										color: '#fff'
									}
								}
							}
						},
						emphasis: {},
						data: data
					}
				]
			});
			var Chart3 = echarts.init(document.getElementById('chart3'));
			let option1 = {
				title: {
					show: true,
					// text: e + '人',
					x: 'center',
					y: 'center',
					textStyle: {
						fontSize: '15',
						color: 'white',
						fontWeight: 'normal'
					}
				},
				tooltip: {
					trigger: 'item',
					formatter: '{d}%',
					show: false
				},
				legend: {
					orient: 'vertical',
					 x: 'left',
					show: false,
				},
				series: [{
						name: '',
						type: 'pie',
						radius: ['65%', '85%'],
						avoidLabelOverlap: true,
						hoverAnimation: false,
						label: {
							normal: {
								show: false,
								position: 'center'
							},
							emphasis: {
								show: false
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						itemStyle: {
							normal: {
								color: function(params) {
									var colorList = [
										{
											c1: '#F19900', //挖掘机
											c2: '#F19900'
										},
										{
											c1: '#2CB900', //推土机
											c2: '#2CB900'
										},
										{
											c1: '#049F5F', //堆高机
											c2: '#049F5F'
										},
										{
											c1: '#00E6FF', //装载机
											c2: '#00E6FF'
										},
										{
											c1: '#EA4D3D', //压路机
											c2: '#EA4D3D'
										},
										{
											c1: '#FEE201', //摊铺机
											c2: '#FEE201'
										},
										{
											c1: '#9000C6', //叉车
											c2: '#9000C6'
										},
										{
											c1: '#0C00FF', //起重机
											c2: '#0C00FF'
										}
									];
									return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
										{
											//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
											offset: 0,
											color: colorList[params.dataIndex].c1
										},
										{
											offset: 1,
											color: colorList[params.dataIndex].c2
										}
									]);
								}
							}
						},
						data: [{ value: 60, name: '国III' }, { value: 200, name: '国IV' },
							   { value: 100, name: '国V' },{ value: 100, name: '国V' },
							   { value: 100, name: '国V' },{ value: 100, name: '国V' },
							   { value: 100, name: '国V' },{ value: 100, name: '国V' }]
					}
				]
			};
			Chart3.setOption(option1);
			var Chart4 = echarts.init(document.getElementById('chart4'));
			let option2 = {
				title: {
					show: true,
					// text: e + '人',
					x: 'center',
					y: 'center',
					textStyle: {
						fontSize: '15',
						color: 'white',
						fontWeight: 'normal'
					}
				},
				tooltip: {
					trigger: 'item',
					formatter: '{d}%',
					show: false
				},
				legend: {
					orient: 'vertical',
					 x: 'left',
					show: false,
				},
				series: [{
						name: '',
						type: 'pie',
						radius: ['65%', '85%'],
						avoidLabelOverlap: true,
						hoverAnimation: false,
						label: {
							normal: {
								show: false,
								position: 'center'
							},
							emphasis: {
								show: false
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						itemStyle: {
							normal: {
								color: function(params) {
									var colorList = [
										{
											c1: '#EA4D3D', //国III
											c2: '#EA4D3D'
										},
										{
											c1: '#00E6FF', //国IV
											c2: '#00E6FF'
										},
										{
											c1: '#FEE201', //国V
											c2: '#FEE201'
										}
									];
									return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
										{
											//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
											offset: 0,
											color: colorList[params.dataIndex].c1
										},
										{
											offset: 1,
											color: colorList[params.dataIndex].c2
										}
									]);
								}
							}
						},
						data: [{ value: 60, name: '国III' }, { value: 200, name: '国IV' },{ value: 100, name: '国V' }]
					}
				]
			};
			Chart4.setOption(option2);
			var Chart5 = echarts.init(document.getElementById('chart5'));
			let option3 = {
				title: {
					show: true,
					// text: e + '人',
					x: 'center',
					y: 'center',
					textStyle: {
						fontSize: '15',
						color: 'white',
						fontWeight: 'normal'
					}
				},
				tooltip: {
					trigger: 'item',
					formatter: '{d}%',
					show: false
				},
				legend: {
					orient: 'vertical',
					 x: 'left',
					show: false,
				},
				series: [{
						name: '',
						type: 'pie',
						radius: ['65%', '85%'],
						avoidLabelOverlap: true,
						hoverAnimation: false,
						label: {
							normal: {
								show: false,
								position: 'center'
							},
							emphasis: {
								show: false
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						itemStyle: {
							normal: {
								color: function(params) {
									var colorList = [
										{
											c1: '#00E6FF', //区域内
											c2: '#00E6FF'
										},
										{
											c1: '#FEE201', //区域外
											c2: '#FEE201'
										}
									];
									return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
										{
											//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
											offset: 0,
											color: colorList[params.dataIndex].c1
										},
										{
											offset: 1,
											color: colorList[params.dataIndex].c2
										}
									]);
								}
							}
						},
						data: [{ value: 260, name: '区域内' }, { value: 100, name: '区域外' }]
					}
				]
			};
			Chart5.setOption(option3);
			var Chart7 = echarts.init(document.getElementById('chart7'));
			let option4 = {
				title: {
					show: true,
					// text: e + '人',
					x: 'center',
					y: 'center',
					textStyle: {
						fontSize: '15',
						color: 'white',
						fontWeight: 'normal'
					}
				},
				tooltip: {
					trigger: 'item',
					formatter: '{d}%',
					show: false
				},
				legend: {
					orient: 'vertical',
					 x: 'left',
					show: false,
				},
				series: [{
						name: '',
						type: 'pie',
						radius: ['65%', '85%'],
						avoidLabelOverlap: true,
						hoverAnimation: false,
						label: {
							normal: {
								show: false,
								position: 'center'
							},
							emphasis: {
								show: false
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						itemStyle: {
							normal: {
								color: function(params) {
									var colorList = [
										{
											c1: '#EA4D3D', //国III
											c2: '#EA4D3D'
										},
										{
											c1: '#00E6FF', //国IV
											c2: '#00E6FF'
										},
										{
											c1: '#FEE201', //国V
											c2: '#FEE201'
										},
										{
											c1: '#2CB900', //国VI
											c2: '#2CB900'
										}
									];
									return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
										{
											//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
											offset: 0,
											color: colorList[params.dataIndex].c1
										},
										{
											offset: 1,
											color: colorList[params.dataIndex].c2
										}
									]);
								}
							}
						},
						data: [{ value: 60, name: '国III' }, { value: 200, name: '国IV' },{ value: 100, name: '国V' },{ value: 100, name: '国VI' }]
					}
				]
			};
			Chart7.setOption(option4);
		},
		_renderCluserMarker(context) {
			  const count = this.markers.length;
				  
			  let factor = Math.pow(context.count/count, 1/18)
			  let div = document.createElement('div');
			  let Hue = 180 - factor* 180;
			  let bgColor = 'hsla('+Hue+',100%,50%,0.7)';
			  let fontColor = 'hsla('+Hue+',100%,20%,1)';
			  let borderColor = 'hsla('+Hue+',100%,40%,1)';
			  let shadowColor = 'hsla('+Hue+',100%,50%,1)';
			  div.style.backgroundColor = bgColor
			  let size = Math.round(30 + Math.pow(context.count/count,1/5) * 20);
			  div.style.width = div.style.height = size+'px';
			  div.style.border = 'solid 1px '+ borderColor;
			  div.style.borderRadius = size/2 + 'px';
			  div.style.boxShadow = '0 0 1px '+ shadowColor;
			  div.innerHTML = context.count;
			  div.style.lineHeight = size+'px';
			  div.style.color = fontColor;
			  div.style.fontSize = '14px';
			  div.style.textAlign = 'center';
			  context.marker.setOffset(new AMap.Pixel(-size/2,-size/2));
			  context.marker.setContent(div)
		}
	},
};
</script>
<style lang="scss" type="text/css" scoped>
body,
html {
	background-color: black !important;
}
#zr_0 {
	height: 225px !important;
}
.main {
	width: 100%;
	display: flex;
}
.main_left {
	width: 25%;
	height: 100%;
	padding-bottom: 40px;
	// float: left;
}
.main_left_one {
	width: 100%;
	// height: 550px;
	margin-top: 20px;
	background: rgba(73, 110, 255, 0.12);
	border: 0.5px solid rgba(60,157,247,1);
}
.title {
	width: 96%;
	height: 40px;
	// background: url('../../assets/images/bg_title.png') no-repeat;
	background-size: 100% 100%;
	text-align: center;
	line-height: 40px;
	font-size: 20px;
	color: rgba(254, 255, 255, 1);
	font-weight: 500;
	font-family: 'PingFangSC-Medium,PingFang SC';
	margin-bottom: 10px !important;
	border-bottom: 1px solid #256AA2;
	
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.main_left_title {
	// width: 190px;
	// height: 100px;
	// float: left;
	// margin-left: 2.5%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.main_left_title_font {
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
}
.main_left_two {
	width: 100%;
	// height: 230px;
	margin-top: 5px;
	background: rgba(73, 110, 255, 0.12);
	border: 0.5px solid rgba(60,157,247,1);
	// padding-bottom: 10px;
}
.jian {
	width: 35%;
	height: 100%;
	background-image: linear-gradient(to right, #12c8d4, #42eec7);
	border-radius: 5px;
}
.jian2 {
	width: 25%;
	height: 100%;
	background-image: linear-gradient(to right, #12c8d4, #42eec7);
	border-radius: 5px;
}
.jian3 {
	width: 20%;
	height: 100%;
	background-image: linear-gradient(to right, #12c8d4, #42eec7);
	border-radius: 5px;
}
.jian4 {
	width: 15%;
	height: 100%;
	background-image: linear-gradient(to right, #ff8e8e, #ff942a);
	border-radius: 5px;
}
.main_center {
	width:50%;
	// float: left;
	// margin-left: 1%;
	margin-top: 20px;
	padding-bottom: 40px;
	display: flex;
	align-items: center;
	flex-direction: column;
}
.main_center_top {
	width: 90%;
	height: 160px;
	background: rgba(73, 110, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	    box-shadow: 0 0 2.5vw #237ad4 inset;
	    background: linear-gradient(#1359df, #1359df) left top,
	    linear-gradient(#1359df, #1359df) left top,
	    linear-gradient(#1359df, #1359df) right top,
	    linear-gradient(#1359df, #1359df) right top,
	    linear-gradient(#1359df, #1359df) left bottom,
	    linear-gradient(#1359df, #1359df) left bottom,
	    linear-gradient(#1359df, #1359df) right bottom,
	    linear-gradient(#1359df, #1359df) right bottom;
	    background-repeat: no-repeat;
	    background-size: 0.1vw 18vw, 1.5vw 0.1vw;
}
.main_center_top_title {
	width: 132px;
	height: 40px;
	margin-left: calc(50% - 66px);
	background: url('../../assets/images/bg_center.png') no-repeat;
	background-size: 100% 100%;
	text-align: center;
	line-height: 40px;
	font-size: 20px;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 500;
	font-family: 'PingFangSC-Medium,PingFang SC';
}
.main_right {
	width: 24.5%;
	margin-left: 3px;
	height: 100%;
	padding-bottom: 40px;
	// float: left;
}
.main_right_one {
	width: 100%;
	// height: 450px;
	margin-top: 20px;
	background: rgba(73, 110, 255, 0.12);
	border: 1px solid rgba(60, 157, 247, 1);
}
.main_right_title {
	width: 30%;
	height: 80px;
	float: left;
	margin-left: 2.5%;
}
.main_right_two {
	width: 100%;
	height: 310px;
	margin-top: 5px;
	background: rgba(73, 110, 255, 0.12);
	border: 1px solid rgba(60, 157, 247, 1);
}
.title_left {
	width: 30%;
	height: 50px;
	text-align: center;
	line-height: 50px;
	cursor: pointer;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.85);
	float: right;
}
#box {
	width: 100%;
	height: 180px;
	line-height: 30px;
	overflow: hidden;
	// padding-left: 30px;
	transition: all 0.5s;
	color: rgba(255, 255, 255, 0.7);
}
.anim {
	transition: all 0.5s;
}
#con1 {
	float: left;
	width: 100%;
}
#con1 li {
	list-style: none;
	line-height: 30px;
	height: 30px;
}

#box1 {
	width: 100%;
	height: 50px;
	// line-height: 50px;
	overflow: hidden;
	transition: all 2s;
	color: rgba(255, 255, 255, 0.7);
}
.anim1 {
	transition: all 2s;
}
.ge {
	width: 36px;
	height: 48px;
	float: right;
	background: url('../../assets/images/shuju.png') no-repeat;
	background-size: 100% 100%;
	font-size: 24px;
	font-weight: bold;
	color: rgba(255, 255, 255, 1);
	line-height: 48px;
	text-align: center;
}
.main_center_bottom {
	width: 100%;
	// height: 210px;
	background: rgba(73, 110, 255, 0.12);
	border: 1px solid rgba(60,157,247,1);
	margin-top: 5px;
	margin-left: 5px;
}
.class1{background: #0B3150;}
</style>
